<template>
    <div class="destination-box">
        <div style="width:100%;font-size: 20px;margin-bottom:40px;">
            <span style="float:left;">用户目的地偏好</span> <i style="float:right; color:#bfbfbf;cursor: pointer;"
                @click="handlerClose" class="el-icon-error"></i>
        </div>
        <el-cascader style="display:block; margin-bottom:20px;" size="large" :options="options" v-model="selectedOptions"
            @change="handleChange">
        </el-cascader>
        <div class="block">
            <el-date-picker clearable v-model="dateTime" type="datetimerange" align="right" start-placeholder="开始日期"
                @change="handlerDateChanged" @blur="handlerInputBlur" end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']">
            </el-date-picker>
        </div>
        <el-table :data="tableData" style="width: 100%;height: 100px;overflow-y: scroll;">
            <el-table-column prop="area" label="目的地">
            </el-table-column>
            <el-table-column prop="count" label="次">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data'

export default {
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            dateTime: [],
            tableData: [
                {
                    area: '市民广场',
                    count: 100
                },
                {
                    area: '常州北站',
                    count: 100
                },
                {
                    area: '万达广场',
                    count: 100
                },
                {
                    area: '常州机电学院',
                    count: 100
                },
                {
                    area: '万达广场（常州市武进区店）',
                    count: 100
                }
            ]
        }
    },
    methods: {
        handlerClose() {
            this.$emit('close')
        },
        handlerDateChanged() {
            console.log(this.dateTime)
        },
        handlerInputBlur() {
            console.log("失去了焦点", this.dateTime)
        },
        handleChange() {
            console.log(this.selectedOptions)
        }
    }
}
</script>

<style scoped>
.destination-box {
    position: absolute;
    bottom: 10px;
    left: 330px;
    border-radius: 10px;
    width: 400px;
    height: 260px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 145, 255, 0.3);
}
</style>